﻿@model string
@{
    ViewBag.Title = "Products";
}

<h2>Products</h2>

<p>
    <a class="btn btn-sm btn-primary" href="/Product/Create">Create new product</a>
</p>

<table ng-controller="ItemsController" ng-table="tableParams" class="table" template-pagination="custompager" show-filter="true">
    <tr ng-repeat="item in items">
        <td data-title="'Name'" filter="{ 'Name': 'text' }" sortable="'Name'">
            {{item.Name}}
        </td>
        <td data-title="'Public Key'">
            <button class="copy-button" data-clipboard-text="{{item.PublicKey}}"><i class="glyphicon glyphicon-paperclip"></i></button>
        </td>
        <td>
            <a class="btn btn-sm btn-primary" style="width: 80px;" href="/Product/Edit/{{item.Id}}">Edit</a>
            <a class="btn btn-sm btn-primary" style="width: 80px;" href="/Product/Details/{{item.Id}}">Details</a>
            <a class="btn btn-sm btn-primary" style="width: 80px;" href="/Product/Delete/{{item.Id}}">Delete</a>
        </td>
    </tr>
</table>
@Html.Partial("_CustomPager")

@section Scripts
{
    <script type="text/javascript">
        LMApp.factory('bootstrappedData', function() {
            return {
                items: @Html.Raw(Model)
                }
        });
    </script>
}